//默认是第一页
let page = 1
//默认每页显示 6 条
let line = 6

// 根据响应的数据 动态生成页面
setPage()

async function setPage() {
    //获取url地址
    let str = window.location.href
    //十六进制转换为中文
    str = window.decodeURIComponent(str)
    // 截取字符串 , 获取传过来的参数
    str = str.slice(str.indexOf('?') + 1)
    // 转换成数组
    const arr = str.split('=')
    // 转换成对象
    const catObj = {}
    catObj[arr[0]] = arr[1]

    //获取cat_one_id
    let cat_one_id = catObj.cat_one_id;


    const res = await myPromiseJQueryAjax('../server/goods_list.php', 'get', { cat_one_id: cat_one_id, page: page, line: line }, 'json')


    // 动态生成页面内容
    let string = ''
    //循环遍历响应的数据 , 写入数据数值 , 动态生成页面
    res.data.forEach(function (item) {
        string += `
    <li class="list-item">
    <div class="panel panel-primary">
      <div class="panel-body">
        <ol class="breadcrumb">
          <li><a href="#">${item.cat_one_id}</a></li>
          <li><a href="#">${item.cat_two_id}</a></li>
          <li class="active">${item.cat_three_id}</li>
        </ol>
      </div>
      <div class="panel-footer">
        <div class="row">
          <div class="">
            <div class="thumbnail">
              <img
                src="${item.goods_big_logo}"
                alt="...">
              <div class="caption">
                <h3>${item.goods_name}</h3>
                <p>
                  <i class="glyphicon glyphicon-yen"></i>
                  <span>${item.goods_price}</span>
                </p>
                <p>
                  <a href="javascript:;" name="find" cat_id="${item.cat_id}" class="btn btn-primary" role="button">查找相似商品</a> 
                  <a href="./detail.html" name="detail" goods_id="${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
    `
    })

    //写入内容
    $('.container>ul').html(string)


    $('[name="p"]').pagination({
        pageCount: res.sumPage,         //  当前数据对应的总页数
        totalData: res.row,             //  总数据数量
        current: res.page,             //  当前页数
        showData: res.line,             //  当前每页数据数量
        prevContent: '上一页',          //  上一页节点内容
        nextContent: '下一页',          //  下一页节点内容
        prevCls: 'prev',                 //  上一页的class
        nextCls: 'next',                 //  下一页的class
        activeCls: 'active',             //  选中状态类名
        mode: 'fixed',                 //  固定分页按钮数量
        count: 4,                      //  除了选中按钮之外 其他分页按钮的个数 也就是设定4 一共5个按钮
        coping: true,                   //  是否开启首页末页
        homePage: '首页',               //  首页内容
        endPage: '末页',                //  末页内容
        isHide: true,                  //  总页数为 0 / 1 隐藏分页插件 
        keepShowPN: true,              //  是否一直显示 上一页 下一页
        jump: true,                     //  跳转指定页数
        callback: function (result) {     //  分页插件的回调函数 点击分页插件按钮时执行
            // // 回调函数的形参中 存储的分页插件对象
            // console.log(result);
            // // 其中 result.getCurrent() 获取 点击分页插件按钮 对应的页数
            // console.log( result.getCurrent() );

            // 根据 result.getCurrent() 获取的页数 再次发起请求 获取数据库数据 动态渲染生成新的页面内容
            page = result.getCurrent();

            // 再次调用函数动态渲染生成页面
            setPage();
        }
    })

    // 查看相似商品按钮
    $('[name="find"]').click(function () {

        //获取cat_id
        let cat_id = this.getAttribute('cat_id')

        // 声明变量存储字符串数据
        let str = '';

        // 循环遍历数组写入数据数值
        res.data.forEach(item => {

            // 判断符合点击cat_id的 写入数据数值
            if (item.cat_id === cat_id) {

                str += `
        <li class="list-item">
            <div class="panel panel-primary">
              <div class="panel-body">
                <ol class="breadcrumb">
                  <li><a href="#">${item.cat_one_id}</a></li>
                  <li><a href="#">${item.cat_two_id}</a></li>
                  <li class="active">${item.cat_three_id}</li>
                </ol>
              </div>
              <div class="panel-footer">
                <div class="row">
                  <div class="">
                    <div class="thumbnail">
                      <img
                        src="${item.goods_big_logo}"
                        alt="...">
                      <div class="caption">
                        <h3>${item.goods_name}</h3>
                        <p>
                          <i class="glyphicon glyphicon-yen"></i>
                          <span>${item.goods_price}</span>
                        </p>
                        <p><a href="javascript:;" name="find" cat_id="${item.cat_id}" class="btn btn-primary" role="button">查找相似商品</a> <a href="./detail.html"
                            class="btn btn-danger" goods_id="${item.goods_id}" role="button">查看商品详情</a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </li>
        `
            }
            //清空页面内容
            $('.container>ul').html('')

            //写入页面
            $('.container>ul').html(str)

        })
    })


    //查看商品详情按钮
    $('[name="detail"]').click(function () {

        //写入 localStorage 当前的商品goods_id
        window.localStorage.goods_id = this.getAttribute('goods_id')


    })


}


